<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>通义前问 - 知识管理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f6fa;
            color: #333;
            line-height: 1.6;
        }
        
        .app-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .app-header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .app-title {
            color: #2c3e50;
            font-size: 28px;
            font-weight: bold;
        }
        
        .app-subtitle {
            color: #7f8c8d;
            font-size: 14px;
            margin-top: 5px;
        }
        
        .nav-links {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .nav-link {
            margin: 0 15px;
            text-decoration: none;
            color: #3498db;
            font-weight: bold;
        }
        
        .nav-link:hover {
            text-decoration: underline;
        }
        
        .knowledge-container {
            flex: 1;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        
        .input-area {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
        
        .textarea-label {
            font-weight: bold;
            margin-bottom: 8px;
            color: #2c3e50;
        }
        
        .knowledge-textarea {
            width: 100%;
            min-height: 150px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
            font-weight: bold;
            align-self: flex-end;
        }
        
        .button-primary {
            background-color: #3498db;
            color: white;
        }
        
        .button-primary:hover {
            background-color: #2980b9;
        }
        
        .search-area {
            display: flex;
            margin-bottom: 20px;
        }
        
        .search-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .search-button {
            margin-left: 10px;
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .results-container {
            flex: 1;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
        }
        
        .result-item {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        
        .status-message {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            text-align: center;
        }
        
        .status-success {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-error {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="app-header">
            <h1 class="app-title">通义前问 - 知识管理</h1>
            <p class="app-subtitle">管理用于增强聊天的知识库</p>
        </div>
        
        <div class="nav-links">
            <a href="index.html" class="nav-link">返回聊天</a>
            <a href="#" class="nav-link" id="check-pinecone">检查Pinecone状态</a>
            <a href="#" class="nav-link" id="clear-status">清除状态消息</a>
        </div>
        
        <div class="knowledge-container">
            <div class="input-area">
                <label class="textarea-label">添加新知识</label>
                <textarea id="knowledge-input" class="knowledge-textarea" placeholder="输入要添加到知识库的文本..."></textarea>
                <button id="add-knowledge" class="button button-primary">添加到知识库</button>
                <div id="status-message" style="display: none;" class="status-message"></div>
            </div>
            
            <div class="search-area">
                <input type="text" id="search-input" class="search-input" placeholder="搜索知识库...">
                <button id="search-button" class="search-button">搜索</button>
            </div>
            
            <div id="results-container" class="results-container">
                <p style="color: #7f8c8d; text-align: center;">搜索结果将显示在这里</p>
            </div>
        </div>
    </div>
    
    <script>
        // DOM 元素
        const knowledgeInput = document.getElementById('knowledge-input');
        const addKnowledgeButton = document.getElementById('add-knowledge');
        const statusMessage = document.getElementById('status-message');
        const searchInput = document.getElementById('search-input');
        const searchButton = document.getElementById('search-button');
        const resultsContainer = document.getElementById('results-container');
        const clearStatusButton = document.getElementById('clear-status');
        const checkPineconeButton = document.getElementById('check-pinecone');
        
        // 事件监听器
        addKnowledgeButton.addEventListener('click', addKnowledge);
        searchButton.addEventListener('click', searchKnowledge);
        clearStatusButton.addEventListener('click', () => statusMessage.style.display = 'none');
        checkPineconeButton.addEventListener('click', checkPineconeStatus);
        
        // 添加知识
        function addKnowledge() {
            const text = knowledgeInput.value.trim();
            
            if (!text) {
                showStatus('请输入知识内容', false);
                return;
            }
            
            showStatus('正在添加知识...', true);
            
            fetch('/knowledge', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ text: text })
            })
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                return response.json();
            })
            .then(data => {
                showStatus(data.message, data.success);
                if (data.success) {
                    knowledgeInput.value = '';
                    // 添加成功后验证
                    setTimeout(() => {
                        searchInput.value = text.split(' ').slice(0, 3).join(' ');
                        searchKnowledge();
                    }, 1000);
                }
            })
            .catch(error => {
                console.error('添加知识时出错:', error);
                showStatus('添加知识时出错: ' + error.message, false);
            });
        }
        
        // 搜索知识
        function searchKnowledge() {
            const query = searchInput.value.trim();
            
            if (!query) {
                showStatus('请输入搜索关键词', false);
                return;
            }
            
            resultsContainer.innerHTML = '<p style="text-align: center; color: #7f8c8d;">正在搜索...</p>';
            
            fetch(`/search?query=${encodeURIComponent(query)}`)
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                return response.json();
            })
            .then(results => {
                if (results.length === 0) {
                    resultsContainer.innerHTML = '<p style="text-align: center; color: #7f8c8d;">没有找到匹配的知识</p>';
                    return;
                }
                
                resultsContainer.innerHTML = '';
                results.forEach(result => {
                    const resultItem = document.createElement('div');
                    resultItem.className = 'result-item';
                    resultItem.textContent = result;
                    resultsContainer.appendChild(resultItem);
                });
            })
            .catch(error => {
                console.error('搜索知识时出错:', error);
                resultsContainer.innerHTML = `<p style="text-align: center; color: #721c24;">搜索时出错: ${error.message}</p>`;
            });
        }
        
        // 显示状态消息
        function showStatus(message, isSuccess) {
            statusMessage.textContent = message;
            statusMessage.className = isSuccess ? 'status-message status-success' : 'status-message status-error';
            statusMessage.style.display = 'block';
        }
        
        // 检查Pinecone状态
        function checkPineconeStatus() {
            showStatus('正在检查Pinecone连接状态...', true);
            
            fetch('/api/pinecone/status')
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                return response.json();
            })
            .then(data => {
                if (data.status === 'ok') {
                    let statusText = 'Pinecone连接正常\n';
                    statusText += `添加文档: ${data.addDocumentSuccess ? '成功' : '失败'}\n`;
                    statusText += `搜索文档: ${data.searchSuccess ? '成功' : '失败'}\n`;
                    statusText += data.searchResults && data.searchResults.length > 0 ? 
                        `找到${data.searchResults.length}条结果` : '未找到搜索结果';
                    
                    showStatus(statusText, true);
                } else {
                    showStatus(`Pinecone连接异常: ${data.error}`, false);
                }
            })
            .catch(error => {
                showStatus('检查Pinecone状态时出错: ' + error.message, false);
            });
        }
    </script>
</body>
</html> 